<script>
import { useVModel } from '@vueuse/core'
import { provide } from 'vue'

export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props, { emit }) {
    // 接收v-model的值
    // 实现与 member-order组件 数据商品绑定
    const activeName = useVModel(props, 'modelValue', emit)

    // 使用provide依赖注入, 将activeName传递给XtxTabsPanel组件
    provide('activeName', activeName)

    /**
     * 点击选项卡触发函数
     * @param tabName 选项卡名称
     * @param index   选项卡当前索引
     */
    const tabClick = (tabName, index) => {
      activeName.value = tabName    // 自动触发emit函数 emit('update:modelValue', newVal)
      // 额外传出了一个 tab-click 自定义事件
      emit('tab-click', {
        tabName,
        index
      })
    }

    return {
      activeName,
      tabClick
    }
  },
  render() {
    // jsx语法演示
    // // 返回的内容会进行渲染
    // // 1.在babel的帮助下, 可以在vue中写jsx语法
    // // 2.数据的使用 | 插值表达式使用单个{}, 属性绑定也是用{}
    // const name = 'tom'
    // const title = 'tom 12'
    // // 3.事件如何绑定
    // const say = () => {
    //   console.log('hi jsx')
    // }
    // // 4.定义一个jsx对象
    // const sub = <sub>456</sub>
    // const subArr = [<sub>abc</sub>, <sub>def</sub>]
    //
    // return <h1 title={title} onClick={say}>{name} {sub} | {subArr}</h1>

    // 需要在这里进行组织
    // 1.tabs组件大容器
    // 2.选项卡的导航菜单结构
    // 3.内容容器

    // 获取插槽内容     panels[0].props === { label: '选项卡1', name: 'first' }
    const panels = this.$slots.default()
    // 动态的panels组件集合, 处理静态的模板, 和使用v-for动态生成的模板
    const dynamicPanels = []
    panels.forEach((item) => {
      // 判断是静态模板还是动态指令模板
      if (item.type.name === 'XtxTabsPanel') {
        // 静态
        dynamicPanels.push(item)
      } else {
        // v-for 指令动态渲染出来的
        dynamicPanels.push(...item.children)
      }
    })
    console.log('panels', panels)
    console.log('dynamicPanels', dynamicPanels)

    const nav = <nav>{
      dynamicPanels.map((item, index) => {
        return <a class={{ active: item.props.name === this.activeName }}
            // 这里体验了使用回调函数的一种方式, 参数传入一个匿名函数
            // 不能使用函数调用方式 onClick={this.tabClick(item.props.name)}
                  onClick={() => this.tabClick(item.props.name, index)}
                  href="javascript:;">{item.props?.label}</a>
      })
    }
    </nav>

    return <div class="xtx-tabs">{[nav, dynamicPanels]}</div>
  }
}
</script>

<style lang="less" scoped>
.xtx-tabs {
  background-color: #fff;

  > nav {
    display: flex;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;

    > a {
      width: 110px;
      height: 60px;
      line-height: 60px;

      font-size: 16px;
      border-right: 1px solid #f5f5f5;

      &.active {
        // 由于border加粗了, 所以这个line-height也要变化
        height: 60px;
        line-height: 56px;
        border-top: 2px solid @xtxColor;
        background-color: #fff;
      }
    }
  }
}
</style>
